import React, { Component } from 'react'

class Demo extends Component {
  state = {}
  static getDerivedStateFromProps(props, state) {
    console.log("1. getDerivedStateFromProps:", props);
    return null;
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('2.shouldComponentUpdate', nextProps, nextState)
    if(this.props.msg === nextProps.msg) {
      return false
    }
    return true
  }
  render() {
    console.log('3.render函数执行')
    return (
      <div>
        <h1>Demo组件{this.props.msg}</h1>
      </div>
    )
  }
  getSnapshotBeforeUpdate(props, state) {
    console.log("4. getSnapshotBeforeUpdate")
    return 100;
  }
  componentDidUpdate(props, state, snapshot) {
    console.log("5. componentDidUpdate")
    console.log("来自 getSnapshotBeforeUpdate的值:", snapshot);
  }
}

export default class App extends Component {
  state = {
    msg: '🐂'
  }
  handleClick = ()=> {
    this.setState({
      msg: '🐏'
    })
  }
  render() {
    return (
      <div>
        <Demo msg={this.state.msg}></Demo>
        <button onClick={this.handleClick}>更新</button>
      </div>
    )
  }
}
